<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    正在测试ajax的get封装
</body>
<script>
    
    document.onclick =function(){
        const url = "http://127.0.0.1:3000/login";

        ajaxGet(url, function(res){
            res = JSON.parse(res);
            console.log(res);
        }, {
            username: "admin",
            password: 123456
        });
    }

    // 功能：发起ajax的get请求
    // 参数：
        // 参数1：要请求的地址
        // 参数2：请求成功后的回调函数，形参：响应数据
        // 参数3：可选，发起请求时要携带的数据
    

    function ajaxGet(url, cb, obj){
        // 1. 解析数据
        let str = "";
        for(let i in obj){
            str += `${i}=${obj[i]}&`;
        }
        // 2. 拼接url
        url = url + "?" + str + "__qf_t__=" + Date.now();
        // 3. 发起请求
        const xhr = new XMLHttpRequest;
        xhr.open("get", url);
        xhr.send();
        // xhr.onreadystatechange = function(){
        //     if(xhr.readyState === 4 && xhr.status === 200){
        //         // 4. 请求成功，将响应数据，传到外部
        //         cb(xhr.responseText);
        //     }
        // }
        xhr.onload = function(){
            if(xhr.status === 200){
                // 4. 请求成功，将响应数据，传到外部
                cb(xhr.responseText);
            }
        }
    }
    
</script>
</html>